<template>
	<div class="myAccount" v-if="initBtn">
        <div class="firstPart" v-if="!editMsg">
            <!-- <span class="close" @click="logout"><i class="iconfont icon-tuichudenglu"></i>退出</span> -->
            <div class="title flex flex-align-center">
               <span>我的资料</span>
            </div>
            <div class="MGbox clearfix">
                <!-- <div class="item left">
                    <div class="messg">
                       <p class="name flex flex-align-center flex-pack-center">剩余推广次数</p>
                       <p class="number flex flex-align-center flex-pack-center" v-text="myMsg.count">0</p>
                    </div>
                </div> -->
                <div class="item left color2">
                    <div class="messg">
                       <p class="name flex flex-align-center flex-pack-center">推广店铺</p>
                       <p class="number flex flex-align-center flex-pack-center" v-text="myMsg.storeCount">0</p>
                    </div>
                </div>
                <div class="item left color3">
                    <div class="messg">
                       <p class="name flex flex-align-center flex-pack-center">剩余推广邀请码次数</p>
                       <p class="number flex flex-align-center flex-pack-center" v-text="myMsg.count">0</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="title">
           <span>账户提现</span>
        </div>
        <div class="cash_box clearfix">
            <div class="cash_i left">
                <span class="cash_i_name">提现卡号</span>
                <input type="text" placeholder="5123 2048 9291 023">
            </div>
            <div class="cash_i left">
                <span class="cash_i_name">姓名</span>
                <input type="text" placeholder="5123 2048 9291 023">
            </div>
            <div class="cash_i left">
                <span class="cash_i_name">身份证号</span>
                <input type="text" placeholder="5123 2048 9291 023">
            </div> 
            <div class="cash_i left">
                <span class="cash_i_name">提现款项</span>
                <input type="text" placeholder="5123 2048 9291 023">
            </div>
             <div class="cash_i left">
                <span class="">最大提款额  ￥7320.00</span>
            </div>
        </div> -->
        <!-- <p style=" font-size:12px;text-align: left;color: #666666;margin-top:15px;">注意：提现款项应为每个月6日，结算上个月的提款项，剩余款项。</p> -->
        <div class="secondPart">
            <div class="title">
                <!-- <span class="left flex flex-align-center">我的资料</span> -->
                <button type="button" class="right editBtn" :style="{display:(editMsg?'none':'block')}" @click="editMsg=!editMsg"><i class="iconfont icon-bianji"></i>编辑</button>
                <div class="right editBox" :style="{display:(!editMsg?'none':'block')}">
                    <button type="button" class="save" @click="fillInfoFn">保存</button>
                    <button type="button" class="cancel" @click="editMsg=!editMsg">取消</button>
                </div>
            </div>
            <div class="cash_box clearfix" :class="{editer_class:editMsg}">
                <div class="cash_i left clearfix">
                    <span class="cash_i_name left">姓名</span>
                    <input class="left" type="text" v-model="myMsg.name">
                </div>
                <div class="cash_i left clearfix">
                    <span class="cash_i_name left">手机号码</span>
                    <input class="left read_only" type="text" v-model="myMsg.mobile" readonly="">
                </div>
                <div class="cash_i left clearfix">
                    <span class="cash_i_name left">邀请码</span>
                    <input class="left read_only" type="text" v-model="myMsg.referralCode" readonly="">
                </div> 
                <div class="cash_i left clearfix">
                    <span class="cash_i_name left">身份证号</span>
                    <input class="left" type="text" v-model="myMsg.idCardNo">
                </div>
                <!-- <div class="cash_i left clearfix">
                    <span class="cash_i_name left">银行卡号</span>
                    <input class="left" type="text" v-model="myMsg.bankCardNo">
                </div>
                <div class="cash_i left clearfix">
                    <span class="cash_i_name left">开户银行</span>
                    <input class="left" type="text" v-model="myMsg.bankName">
                </div> -->
                <div class="mask_layer"></div>
            </div>
        </div>
	</div>
</template>

<script>
export default {
  	data(){
  		return{
            editMsg: false, // 编辑信息
            initBtn:false,//页面初始化
            myMsg: {
                "amount": 0,
                "storeCount": 0,
                "codeCount": 0,
                "referralCode": "",
                "name": "",
                "bankName": "",
                "idCardNo": "",
                "bankCardNo": "",
                "mobile": ""
            }, // 我的信息
  		}
  	},
    methods:{
        logout(){
            localStorage.clear();
            this.$router.replace('/login');
        },
        getMyMsg: function () {
            this.$http.get("profile").then((res)=>{
                this.myMsg = res.data;
                this.initBtn = true;
            }).catch((err)=>{

            })
        },
        fillInfoFn(){
            let body = {
                "name": this.myMsg.name,
                "idCardNo": this.myMsg.idCardNo,
                "bankCardNo": this.myMsg.bankCardNo,
                "bankName": this.myMsg.bankName
            }
            if ( !body.name ) {
                this.$message.error({
                    message: "请输入姓名",
                    type: 'error',
                });
                return false;
            }
            if ( !/^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/.test(body.idCardNo) ) {
                this.$message.error({
                    message: "身份证号格式有误",
                    type: 'error',
                });
                return false;
            }
            if ( !/^(\d{16}|\d{19})$/.test(body.bankCardNo) ) {
                this.$message.error({
                    message: "银行卡号有误",
                    type: 'error',
                });
                return false;
            }
            if ( !body.bankName ) {
                this.$message.error({
                    message: "请输入开户行",
                    type: 'error',
                });
                return false;
            }

            this.$http.put('profile',body).then((res)=>{
                this.editMsg = false;
                this.$message.success({
                    message: "修改成功",
                    type: 'success',
                });
                this.getMyMsg();
            })
        }
    },
    created: function () {
        this.getMyMsg();
    },
  	mounted(){
  	}
}                                                                                                   
</script>
<style lang="scss" scoped>
	@import "account";
</style>
